<template>
	<view v-else class="bg-index animation-fade">
		<image class="bg" :src="config.bg.info" mode="aspectFill"></image>
		<view class="c-text" v-if="confession">
			<out-text :text="config.text" icon='heart-fill'></out-text>
		</view>
		<view v-else>
			<view class="title">
				{{showTitle[0]}}
			</view>
			<view class="tolove">
				<image :src="config.card.info" mode="widthFix"></image>
			</view>
			<view class="btn-card">
				<button class="cu-btn" @click="confession = true">YES <u-icon name="heart-fill" color="#ffffff"></u-icon>
				</button>
				<button class="cu-btn" @click="noBut">NO <u-icon name="close " color="#ffffff"></u-icon></button>
			</view>
			<!-- 文字提示 -->
			<u-modal :show-title="false" show-cancel-button cancel-text="再想想" confirm-text="好的呀" v-model="showText"
				:content="texts.info" @confirm="confession = true">
			</u-modal>
			<!-- 图片提示 -->
			<u-modal v-model="show" confirm-color="#333333" :mask-close-able='true' confirm-text='你先点个yes看看？'
				:show-title='false'>
				<image :src="config.lover.info" mode="aspectFit"></image>
			</u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'tem-page02',
		props: ['config'],
		data() {
			return {
				count: 1,
				texts: '',
				show: false,
				showText: false,
				confession: false,
				modalName: null,
				showTitle: [],

			}
		},
		created() {
			this.texts = this.config.text1
			this.showTitle[0] = this.config.text1.info
		},
		methods: {
			noBut() {
				const val = this.config
				if (this.count < 5) {
					console.log(123);
					this.count++
					this.showText = true
					let i = 'text' + this.count
					this.texts = val[i]
					this.showTitle[0] = val[i].info
				} else {
					this.show = true
				}
			}
		}
	}
</script>

<style>
	.bg {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		z-index: -10;
	}

	.c-text {
		color: #FFFFFF;
		font-size: 38rpx;
		margin: 30rpx 50rpx;
		padding: 20rpx;
		width: 650rpx;
		text-align: justify;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 6rpx;
	}

	.btn-card {
		display: flex;
		justify-content: space-between;
		width: 750rpx;
		margin: 100rpx 0;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1000;
	}

	.cu-btn {
		width: 200rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		background-color: rgba(0, 0, 0, 0.6);
		color: #FFFFFF;
	}

	.again {
		animation-direction: reverse;
		animation-iteration-count: infinite;
		color: red;
	}

	.tolove {
		display: flex;
		justify-content: center;
	}

	.tolove image {
		border: 20rpx solid #FFFFFF;
		width: 500rpx;
		margin: 30rpx;
		border-radius: 8rpx;
	}

	.title {
		font-size: 38rpx;
		padding: 20rpx 10rpx;
		background-color: #fefefe;
		width: 530rpx;
		text-align: center;
		margin: 30rpx 110rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.bg-index {
		padding-top: 130rpx;
		width: 100vw;
		height: 100vh;
		background-position: center;
		background-size: cover;
	}
</style>
